<template>
  <div>

    <lab_head/>
    <lab_header/>

    <div class="container layout layout-margin-top">

      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="content">
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">类别：</div>
              <div class="col-md-11 course-cates-content">
                <a
                  :class="{active:filter.course_type==''}"
                  @click="filter.course_type='', filter.page=1"
                >全部</a>
                <a
                  :class="{active:filter.course_type==''}"
                  @click="filter.course_type=2, filter.page=1">
                  免费</a>
                <a
                  :class="{active:filter.course_type==''}"
                  @click="filter.course_type=1, filter.page=1"
                >收费</a>
                <a
                  v-for="item in courseTypes"
                  :key='item.id'
                  :class="{active:filter.course_type==item.id}"
                  @click="filter.course_type=item.id, filter.page=1"
                >{{ item.title }}</a>
              </div>
            </div>
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">标签：</div>
              <div class="col-md-11 course-cates-content">

                <a
                  :class="{active:filter.course_tag==''}"
                  @click="filter.course_tag='', filter.page=1"
                >全部</a>

                <a
                  v-for="item in courseTags"
                  :key="item.id"
                  :class="{active:filter.course_tag==item.id}"
                  @click="filter.course_tag=item.id,filter.page=1"
                >{{ item.name }}</a>
              </div>
            </div>
          </div>
          <div class="content position-relative">

            <!--
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="/courses/?course_type=all&amp;tag=all&amp;fee=all" @click="get_kind_courses()">已上线</a></li>
                    <li class=""><a href="/courses/?status=preview" class="stat-event" data-stat="preview_course" @click="get_is_online('即将上线')">即将上线</a></li>
                    <li class="active"><a href="javascript:void(0);" @click="set_isonline(0)">全部</a></li>
                    <li class=""><a href="#"  @click="set_isonline(1)">已上线</a></li>
                    <li class=""><a href="javascript:void(0);" class="" data-stat="" @click="set_isonline(2)">即将上线</a></li>
                </ul>  -->

            <ul class="nav nav-tabs">
              <li><a
                :class="{status:filter.status==1}"
                @click="filter.status=1"
              >已上线</a></li>
              <li><a
                :class="{status:filter.status==0}"
                @click="filter.status=0"
              >即将上线</a></li>

            </ul>
            <div class="clearfix"></div>
            <div class="courses-sort">
              <a @click="filter.ordering='-create_time'">最新</a>
              /
              <a @click="filter.ordering='-learner'">最热</a>

            </div>
            <div class="search-result"></div>
            <div class="row">

              <div
                class="col-md-4 col-sm-6  course"
                v-for="item in courses"
                :key="item.id"
              >

                <router-link :to="{path:'/courses/course_show/',query:{id:item.id}}">
                  <div class="course-box">
                    <div class="sign-box">
                      <i
                        class="fa fa-star-o course-follow pull-right"
                        style="display:none"
                      ></i>
                    </div>
                    <div>

                      <div class="course-img">
                        <img
                          :src="item.pic"
                          class="cover-image"
                        >
                      </div>
                      <div class="course-body">
                        <span class="course-title">{{ item.title }}</span>
                      </div>
                      <div class="course-footer">
                        <span class="course-per-num pull-left">
                          <i class="fa fa-users"></i>{{ item.descrip }}
                        </span>
                        <span
                          :class="type_style(item.course_type)"
                          class="pull-right"
                        >{{ item.course_type | type_desc }}</span>
                      </div>
                    </div>

                  </div>
                </router-link>
              </div>

            </div>
          </div>
          <table style="clear:both"></table>
          <nav class="pagination-container">
            <!-- heyui分页 -->
            <!-- <div style="margin-left:650px">
              <Pagination
                @change="change"
                v-model="pagination"
                layout="pager,jumper"
                small
              ></Pagination>
            </div> -->
            <!-- element-ui分页 -->
            <el-pagination
              background
              layout="prev, pager, next"
              :page-count='filter.total'
              :current-page='filter.page'
              prev-text="上一页"
              next-text="下一页"
              @current-change="cp=>{filter.page=cp}"
            ></el-pagination>
          </nav>

        </div>
        <div class="col-md-3 layout-side">

          <user_info/>
          <last_paths/>
          <QR_code/>

        </div>
      </div>
    </div>

    <lab_footer/>

  </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import {courses_get, course_type_get, course_tag_get} from './axios_api/api';
import {config, formatXml} from '../config.js';

export default {
  components: {
    lab_head,
    lab_header,
    lab_footer,
    user_info,
    last_paths,
    QR_code,
  },
  data() {
    return {
      filter: {
        course_type: '',  // 全部:0 免费,
        course_tag: '',  // 课程tag
        status: 1,  // 状态: 全部:0 上线:1, 即将上线2, 已下线:3
        ordering: '',  // 排序, 最新, 最热
        page: 1,  // 当前页
        page_size: 2,  // 每页数量
        total: 1,  // 总页数
      },
      courseTypes: [], // 课程类别, 全部:0, 免费: 1, 限免:2, 会员:3
      courseTags: [], // 课程标签, 全部: 0, python:1, ....
      courses: [], // 课程列表,
    }
  },
  mounted: function () {
    // this.get_courseTypes()
    this.get_courseTags()

  },
  computed: {},
  methods: {
    type_style(v) {
      return 'vip' + v
      // 免费  ->  vip1,  vip2,  vip3
    },
    // 获取标签
    get_courseTags() {
      course_tag_get().then(resp => {
        this.courseTags = resp.list
        this.get_courses()
      })
    },
    // 获取类型
    get_courseTypes() {
      course_type_get().then((resp) => {
        // debugger
        console.log(resp)
        var resp =
          this.courseTypes = resp.results
      })
    },
    //   获取所有课程
    get_courses() {
      // var data = JSON.parse(JSON.stringify(this.filter))  // 复制一份 filter, 断掉引用关系
      // // var data = this.filter  // 数据为: 引用类型, 一处改, 处处改
      // if (data.course_tag == '') {  // 去掉course_tag 参数, 防止后端报错
      //   delete data.course_tag
      // }
      courses_get(this.filter).then(resp => {
        console.log(resp)
        this.courses = resp.list
        this.filter.total = resp.total
        // this.filter.total = Math.ceil(resp.count / this.filter.page_size)
        // count: 2
        // results:
        // attention: 9999
        // course_tag: [1]
        // 0: 1
        // course_type: 1
        // create_time: "2020-08-21T04:14:01.453565Z"
        // desc: "人生苦短, 我用python"
        // id: 1
        // img: null
        // learner: 10
        // status: "1"
        // title: "python"
        // update_time: "2020-08-21T04:16:04.686282Z"

      })
    },
  },
  filters: {
    type_desc(v) {
      let type_desc = {1: '免费', 2: '限免', 3: '会员'}
      return type_desc[v]
    }
  },
  watch: {
    filter: {
      deep: true,
      handler(new_v, old_v) {
        this.get_courses()
      }
    }
  }
}
</script>

<style scoped>
.active {
  color: #fff;
  background: #08bf91;
  text-decoration: none;
}

.vip3 {
  padding: 3px 10px;
  color: #fff;
  border-radius: 100px;
  background-color: #ffae0f;
}

.vip2 {
  padding: 3px 10px;
  color: #fff;
  border-radius: 100px;
  background-color: #f66e6e;
}

.vip1 {
  padding: 3px 10px;
  color: #fff;
  border-radius: 100px;
  background-color: #cfcfcf;
}

.status {
  color: #0c9;
  border-bottom: 1px solid transparent;
  border-bottom-color: #0c9;
}
</style>
